<template>
  <view
    class="booking_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 菜单导航栏 -->
    <menu-navigation-bar
      :isSticky="true"
      :menuList="menuList"
      :onOnSelected="onMenuSelected"
    />

    <!-- 内容 -->
    <view class="content">
      <booking-item
        v-for="(item, index) in dataList"
        :key="index"
        :data="item"
        @onCancel="onCancel(item.bookingId)"
      />
    </view>

    <!-- 加载状态 -->
    <load :status="loadStatue" :isImage="dataList.length < 1" />
  </view>

  <!-- 下拉刷新 -->
  <pull-down-refresh
    :opacity="refresh.moveBottom.value / 3"
    :enble-anim="refresh.isRefresh.value"
  />
</template>

<!-- 预约 -->
<script lang="ts" setup>
import bookingItem from '@/components/business/booking/booking-item.vue'
import menuNavigationBar from '@/components/layout/menu_navigation_bar/menu-navigation-bar.vue'
import { BookingStateEnum } from '@/config/enum/enum'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { refreshHandler } from '@/components/common/pull_down_refresh/index'
import { ref, watch } from 'vue'
import { ReqCancelBooking, ReqSelectBookingPageByState } from '@/api/booking'
import type {
  PageBookingByState,
  QueryPageBookingByState,
} from '@/config/data/data'

//下拉刷新控制函数
const refresh = refreshHandler(300)

//菜单列表
const menuList = ref<string[]>([])

//加载状态
const loadStatue = ref(-1)

//数据列表
const dataList = ref<PageBookingByState[]>([])

//菜单选中
const onMenuSelected = (index: number) => {
  queryPage.value.page = 0
  queryPage.value.state = menuList.value[index]
  nextData(true)
}

//查询参数
const queryPage = ref<QueryPageBookingByState>({
  page: 0,
  size: 10,
  state: '全部',
})

//监听下拉刷新状态
watch(
  () => refresh.isRefresh.value,
  (newValue, oldValue) => {
    if (newValue) {
      //开启刷新，并请求
      nextData(true).finally(() => {
        refresh.refreshEnd(500)
      })
    }
  }
)

/**
 * 取消预约
 * @param id: 预约编号
 * @param index: 下标
 */
const onCancel = (id: number) => {
  ReqCancelBooking({ id: id }).then((res) => {
    if (res.code == 200) {
      if (res.data) {
        nextData(true)
      }
      uni.showToast({
        title: res.data ? '取消成功' : '取消失败',
        icon: 'none',
        mask: true,
      })
    }
  })
}

//防止重复请求
const isReq = ref(true)

//初始化
const init = () => {
  //菜单初始化
  menuList.value.push('全部')
  menuList.value.push(BookingStateEnum.FINISH)
  menuList.value.push(BookingStateEnum.CANCEL)

  //初始数据
  nextData()
}

/**
 * 下一页
 * @param refresh: 是否刷新
 */
const nextData = (refresh: boolean = false) => {
  return new Promise((reslove) => {
    if (!isReq.value && !refresh) {
      reslove(true)
      return
    }
    refresh ? (queryPage.value.page = 0) : ''
    isReq.value = false
    queryPage.value.page += 1
    loadStatue.value = 0
    ReqSelectBookingPageByState(queryPage.value)
      .then((res) => {
        if (res.code == 200 && res.data) {
          refresh ? (dataList.value = []) : ''
          dataList.value.push(...res.data)
          let bool = res.data.length == queryPage.value.size
          loadStatue.value = bool ? 1 : -1
        }
      })
      .catch(() => {
        loadStatue.value = -2
        setTimeout(() => {
          loadStatue.value = -1
        }, 100)
      })
      .finally(() => {
        isReq.value = true
        reslove(true)
      })
  })
}

//页面加载
onLoad(() => {
  init()
})

//滑动到底部
onReachBottom(() => {
  nextData()
})
</script>

<style scoped lang="scss">
.booking_box {
  min-height: 100vh;
  background-color: $uni-bg-color-grey;

  .content {
    padding: 30rpx;
    width: calc(100% - 60rpx);
  }
}
</style>
